<template>
	<view class="fixtop">
		<fixtop>
			<template #l>
				<view class="fixtop-l" @click="back">
					<view class="iconfont icon-jiantouyou"></view>
				</view>
			</template>
			<template #c>
				<view class="fixtop-c">
					店铺信息
				</view>
			</template>
		</fixtop>
	</view>
	<view class="conbox" v-if="shioperdat">
		<view class="tit">账号信息</view>
		<view class="zz-info" style="height:250rpx;">
			<view class="zz-i-item">
				<view class="item-l">店铺LOGO</view>
				<view class="item-r">
					<image :src="'http://127.0.0.1:3006'+shioperdat.img" mode="aspectFill"></image>
				</view>
			</view>
			<view class="zz-i-item">
				<view class="item-l">店铺名称</view>
				<view class="item-r flex">
					<view class="con">{{shioperdat.dname}}</view>
					<view class="iconfont icon-jiantouyou"></view>
				</view>
			</view>
			<!-- 			<view class="zz-i-item">
				<view class="item-l">登录账号</view>
				<view class="item-r flex">
					<view class="con">+8623181728937</view>
					<view class="iconfont icon-jiantouyou"></view>
				</view>
			</view> -->
		</view>
		<view class="tit">联系方式</view>
		<view class="zz-info" style="height: 500rpx;">
			<view class="zz-i-item">
				<view class="item-l">负责人</view>
				<view class="item-r">
					{{JSON.parse(shioperdat.userinfo).name}}
				</view>
			</view>
			<view class="zz-i-item">
				<view class="item-l">联系方式</view>
				<view class="item-r flex">
					+86{{shioperdat.phone}}
				</view>
			</view>
			<view class="zz-i-item">
				<view class="item-l">接单电话</view>
				<view class="item-r flex">
					+86{{shioperdat.phone}}
				</view>
			</view>
			<view class="zz-i-item">
				<view class="item-l">店铺地址</view>
				<view class="item-r flex">
					<view class="con">{{shioperdat.address}}</view>
				</view>
			</view>
			<!-- 			<view class="zz-i-item">
				<view class="item-l">店铺坐标</view>
				<view class="item-r flex">
					<view class="">查看地图</view>
					<view class="iconfont icon-jiantouyou"></view>
				</view>
			</view> -->
		</view>
		<view class="tit">商家信息</view>
		<view class="zz-info" style="450rpx">
			<view class="zz-i-item">
				<view class="item-l">店铺类型</view>
				<view class="item-r">
					{{shioperdat.lx}}
				</view>
			</view>
			<view class="zz-i-item">
				<view class="item-l">主营类型</view>
				<view class="item-r flex">
					{{shioperdat.lx}}
				</view>
			</view>
			<view class="zz-i-item">
				<view class="item-l">辅营类型</view>
				<view class="item-r flex">
					{{shioperdat.fzlx}}
				</view>
			</view>
			<view class="zz-i-item">
				<view class="item-l">开店日期</view>
				<view class="item-r flex">
					{{shioperdat.createdAt}}
				</view>
			</view>
		</view>
	     <view class="btn" @click="exit">退出登录</view>
	</view>
</template>

<script setup>
	import fixtop from '@/components/fixtop/fixtop.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		getstatusheight,
		gettitleheight
	} from '@/utils/getsysteminfo.js'
	import userinfo from '@/store/userinfo.js'
	const heights = getstatusheight() + gettitleheight() + 'px'
	const useuserinfo=userinfo()
	const shioperdat = ref()
	onLoad(e => {
		shioperdat.value = JSON.parse(e.data)
	})
	const back = () => {
		uni.navigateBack()
	}
	const exit=()=>{
		uni.showModal({
			title:'提示',
			content:"确定要退出登录？",
			success(e) {
				if(e.cancel)return
				useuserinfo.userinfo=""
				useuserinfo.wxuserinfo=""
				useuserinfo.shoperinfo=""
				uni.clearStorageSync("token")
				uni.reLaunch({
					url:"/pages/index/index"
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.btn{
		height: 80rpx;
		width: 90%;
		border-radius: 15rpx;
		background-color: #ff644d;
		font-size: 25rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx auto 0 auto;
		color: #fff;
	}
	.fixtop {
		background-color: #ff644d;

		.fixtop-l,
		.fixtop-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			color: #fff;

			.iconfont {
				font-size: 25rpx;
				transform: rotate(180deg);
				margin-left: 20rpx;
			}
		}

		.fixtop-c {
			justify-content: center;
			font-size: 31rpx;
		}
	}

	.conbox {
		height: calc(100vh - v-bind(heights));
		width: 100%;
		background-color: #f5f5f5;
		padding: 20rpx;
		overflow: auto;

		.tit {
			height: 90rpx;
			width: 100%;
			line-height: 90rpx;
			font-size: 28rpx;
			color: #7b7b7b;
		}

		.zz-info {
			height: 400rpx;
			width: 100%;
			border-radius: 15rpx;
			background-color: #fff;
			padding: 20rpx 25rpx;
			display: flex;
			flex-direction: column;

			.zz-i-item {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item-l {
					height: 100%;
					width: fit-content;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
				}

				.flex {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					gap: 15rpx;

					.iconfont {
						font-size: 30rpx;
					}
				}

				.item-r {
					flex: 1;
					padding-left: 20rpx;
					text-align: end;
					font-size: 28rpx;
					font-weight: 700;

					.con {
						width: 400rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>